<template>

<div>

<van-nav-bar
  title="登录"
  class="page-nav-bar"
>
<template #left>
    <van-icon name="cross" size="18" @click="this.$router.back" />
  </template>
</van-nav-bar>

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
     left-icon="manager"
      name="userName"
      label="用户名"
      placeholder="请输入用户名"
        v-model="user.userName"
        :rules="userFormRules.userName"
    />
    <van-field
    left-icon="lock"
      type="password"
      name="userPwd"
      label="密码"
      placeholder="请输入密码"
      v-model="user.userPwd"
      :rules="userFormRules.userPwd"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>



</div>

</template>

<script setup>
import {reactive} from 'vue'
import {login} from "../../api/user"
import {Toast} from "vant"
import {useStore} from "vuex"
import router from "../../router"
    const user=reactive({
    userName:'',    
    userPwd:''
    })

    //定义表单校验规则
    const userFormRules={
        userName:[{require:true,message:"请输入用户名"}],
        userPwd:[
            {require:true,message:"请输入密码"},
            {pattern:/^\d{6}/,message:"密码格式错误"}
        ]
    }

    // function onClickLeft(){

    // }
    const store=useStore()

 async function onSubmit(){


 let res= await  login(user)
if(res.data.code===0){

    store.commit("setUser",res.data)
Toast.success("用户登录成功")
router.push("/my")
}else{
    Toast.fail("用户登录失败")
}
    
    }

</script>

<style>
</style>